<template>
  <div class="box-main">
    <div class="box-main-header">
      <div class="box-main-header-number">
        <img src="@/assets/images/OpenCloseFriend/icon1.png" alt="" />
        <span>10600</span>
      </div>
      <p class="box-main-header-title">开通密友</p>
      <img class="box-main-header-icon-close" src="@/assets/images/OpenCloseFriend/icon2.png" alt="" />
    </div>

    <div class="box-avatar flex-center">
      <div class="box-avatar-round">
        <img class="box-avatar-round-img" src="@/assets/images/comm/avatar.png" alt="" />
        <img class="box-avatar-round-icon" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
      </div>
    </div>
    <div class="list">
      <div class="list-item" :class="{ 'list-item-active': v == 1 }" v-for="v in 15" :key="v">
        <img class="list-item-icon" src="@/assets/images/OpenCloseFriend/icon3.png" alt="" />
      </div>
    </div>
    <div class="footer">
      <div class="footer-num">
        <img src="@/assets/images/OpenCloseFriend/icon1.png" alt="" />
        <span>500</span>
      </div>
      <div class="btn">解锁一个位置</div>
    </div>
  </div>
</template>
<style lang="scss" scoped>
.box-main {
  background-image: url('@/assets/images/OpenCloseFriend/open-close-friend.png');
  background-size: 100% 122.31rem;
  background-repeat: no-repeat;

  .flex-center {
    display: flex;
    justify-content: center;
  }

  &-header {
    display: flex;
    justify-content: space-between;
    padding: 4.87rem 3.08rem 6.15rem 4.36rem;
    position: relative;

    &-number {
      background: rgba(51, 51, 51, 0.2);
      border-radius: 2.56rem;
      padding: 0.51rem 1.54rem 0.77rem;
      display: flex;
      align-items: center;
      font-family: PingFang SC, PingFang SC;
      font-weight: 400;
      font-size: 3.08rem;
      color: #FFFFFF;

      img {
        width: 4.1rem;
        height: 4.1rem;
        display: block;
        margin-right: 0.51rem;
      }
    }

    &-title {
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 4.62rem;
      color: #333333;
      line-height: 6.41rem;
      position: absolute;
      left: 50%;
      transform: translateX(-50%);
    }

    &-icon-close {
      width: 4.62rem;
      height: 4.62rem;
      display: block;
    }
  }

  .box-avatar {
    margin: 0 aoto;
    margin-top: 2.31rem;

    &-round {
      width: 18.1rem;
      height: 18.1rem;
      border-radius: 50%;
      background: rgba(205, 161, 242, .1);
      border: .6rem solid #FFF;
      box-shadow: 0 0 0 1px rgba(255, 255, 255, 0.3);
      padding: 1.51rem;
      backdrop-filter: blur(12px);
      box-sizing: border-box;
      position: relative;
      display: flex;
      align-items: center;
      justify-content: center;

      &-img {
        width: 14.55rem;
        height: 14.55rem;
        display: block;
        border-radius: 50%;
        position: relative;
      }

      &-icon {
        width: 8.21rem;
        height: 3.08rem;
        display: block;
        position: absolute;
        bottom: 0;
      }

      &::before {
        content: "";
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        border-radius: 50%;
        width: 15.41rem;
        height: 15.41rem;
        background: linear-gradient(90deg, rgba(137, 78, 226, 1), rgba(78, 80, 226, 1));
        z-index: -1;
      }
    }
  }

  .list {
    display: flex;
    flex-wrap: wrap;
    gap: 2.56rem;
    padding: 5.13rem 3.08rem;

    &-item {
      width: 21.54rem;
      height: 11.28rem;
      background: rgba(255, 255, 255, 0.5);
      border-radius: 1.54rem;
      display: flex;
      justify-content: center;
      align-items: center;
      box-sizing: border-box;

      &-icon {
        width: 8.21rem;
        height: 3.08rem;
        display: block;
      }
    }

    &-item-active {
      border: 0.26rem solid #DC376B;
    }
  }

  .footer {
    padding: 1.79rem 2.56rem;
    padding-bottom: calc(1.70rem + env(safe-area-inset-bottom));
    background: rgba(255, 255, 255, 0.5);
    display: flex;
    justify-content: space-between;
    align-items: center;

    &-num {
      font-family: Roboto, Roboto;
      font-weight: 400;
      font-size: 3.59rem;
      color: #333333;
      line-height: 4.1rem;
      display: flex;
      align-items: center;
      img {
        width: 3.59rem;
        height: 3.19rem;
        display: block;
        margin-right: 1.03rem;
      }
    }

    .btn {
      padding: 2.05rem 5.13rem;
      background: linear-gradient(90deg, #D4B6F3 0%, #C696F6 100%);
      border-radius: 8.46rem 8.46rem 8.46rem 8.46rem;
      font-family: PingFang SC, PingFang SC;
      font-weight: 500;
      font-size: 3.59rem;
      color: #FFFFFF;
    }
  }

}
</style>